<template>
	<view class="pay_k">
		<view class="top_title">
			<text></text>
			<text class="top_title_t">选择付款方式</text>
			<text class="hide_pay" @click="$emit('onshowpay',{})">取消</text>
		</view>
		
		<view class="price_d">
			<text class="price_b">￥</text>	
			<text class="price">{{trueprice}}</text>
		</view>
		
		<!-- 组合支付选项 -->
		<view class="combine_title">
			<text class="combine_title_text">可用余额</text>
		</view>
		
		<!-- 谷粒余额 - 只显示余额信息，不显示开关 -->
		<view class="balance_item" v-if="guliBalance > 0">
			<view class="balance_left">
				<image class="balance_icon" src="@/static/image/member/jinbi2.png" mode="aspectFit"></image>
				<view class="balance_info">
					<text class="balance_name">谷粒余额</text>
					<text class="balance_amount">可用：{{guliBalance}} 元</text>
				</view>
			</view>
			<view class="balance_right">
				<text class="balance_status">自动使用</text>
			</view>
		</view>
		
		<!-- 谷粒余额提示 -->
		<view class="balance_tip" v-if="guliBalance >= trueprice && useGuli">
			<uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
			<text class="tip_text">谷粒余额足够，可直接支付</text>
		</view>
		
		<!-- 剩余金额需要支付 - 只在谷粒不足时显示 -->
		<view class="remain_pay" v-if="needWechatPay">
			<!-- <view class="remain_title">
				<text class="remain_text">剩余需支付：</text>
				<text class="remain_price">￥{{remainAmount}}</text>
			</view> -->
			
			<!-- 支付方式说明 -->
			<!-- <view class="pay_tips" v-if="useGuli && parseFloat(guliAmount) > 0">
				<view class="tip_item">
					<text class="tip_label">谷粒抵扣：</text>
					<text class="tip_value tip_guli">-￥{{guliAmount}}</text>
				</view>
				<view class="tip_item">
					<text class="tip_label">微信支付：</text>
					<text class="tip_value tip_wechat">￥{{remainAmount}}</text>
				</view>
			</view> -->
			
			<!-- 微信支付 -->
			<radio-group @change="radioChange">
				<view class="pay_dan" @click="selectPayMethod(2)">
					<view class="pay_dan_left">
						<image class="pay_dan_left_img" src="../../static/image/shop/wxpay.png" mode="aspectFit"></image>
						<view class="flex">
							<text class="pay_dan_text_t">微信支付</text>
							<text class="pay_dan_text">安全迅速一步到位</text>
						</view>
					</view>
					<radio value="2" :checked="payMethod == 2" color="#ffbb1c" />
				</view>
			</radio-group>
		</view>
		
		<!-- 支付明细 -->
		<view class="pay_detail">
			<view class="detail_title">支付明细</view>
			<view class="detail_item">
				<text class="detail_label">订单金额：</text>
				<text class="detail_value">￥{{trueprice}}</text>
			</view>
			<view class="detail_item" v-if="useGuli && parseFloat(guliAmount) > 0">
				<text class="detail_label">谷粒抵扣：</text>
				<text class="detail_value detail_minus">-￥{{guliAmount}}</text>
			</view>
			<view class="detail_item" v-if="remainAmount > 0">
				<text class="detail_label">微信支付：</text>
				<text class="detail_value">￥{{remainAmount}}</text>
			</view>
			<view class="detail_divider"></view>
			<view class="detail_item detail_total">
				<text class="detail_label">实付金额：</text>
				<text class="detail_value detail_total_price">￥{{trueprice}}</text>
			</view>
		</view>
		
		<!-- 立即支付按钮 -->
		<view class="pay_post btn" @click="post_pay">
			<text class="pay_post_t">立即支付</text>
		</view>
		
		<!-- 支付密码弹窗 -->
		<paypwd 
			v-if="showPwdDialog" 
			:show="showPwdDialog" 
			:amount="trueprice"
			@confirm="onPwdConfirm"
			@close="showPwdDialog = false"
			@forget="onForgetPwd"
		></paypwd>
	</view>
</template>

<script>
	import $util from "@/util/util.js"
	import paypwd from '@/components/pay/paypwd.vue'
	export default {
		name: "combinepay",
		components: {
			paypwd
		},
		data() {
			return {
				trueprice: 0,
				guliBalance: 0,      // 谷粒余额
				useGuli: false,      // 是否使用谷粒
				guliAmount: '',      // 谷粒使用金额
				payMethod: 2,        // 支付方式 2-微信
				showPwdDialog: false, // 显示密码输入框
			};
		},
		computed: {
			// 剩余需要支付的金额
			remainAmount() {
				let remain = parseFloat(this.trueprice) || 0;
				if (this.useGuli && this.guliAmount) {
					remain -= parseFloat(this.guliAmount) || 0;
				}
				return remain > 0 ? remain.toFixed(2) : 0;
			},
			// 是否需要微信支付（谷粒不足时）
			needWechatPay() {
				// 如果没有使用谷粒，需要微信支付
				if (!this.useGuli) {
					return true;
				}
				// 如果使用了谷粒，但谷粒不足以支付全额
				const guliUsed = parseFloat(this.guliAmount) || 0;
				return guliUsed < parseFloat(this.trueprice);
			}
		},
		props: {
			price: String
		},
		watch: {
			price: {
				handler(e) {
					this.trueprice = e;
				}, 
				immediate: true,
			}
		},
		created() {
			this.loadBalances();
			$util.saveWxOpenid();
		},
		methods: {
			// 加载余额信息
			loadBalances() {
				// 获取谷粒余额
				$util.ajax({
					url: 'User/getguli'
				}, (r) => {
					if (r.code == 1) {
						this.guliBalance = parseFloat(r.data) || 0;
						// 如果有谷粒余额，默认打开开关并使用全部谷粒
						if (this.guliBalance > 0) {
							this.useGuli = true;
							this.useAllGuli();
						}
					} else {
						this.guliBalance = 0;
					}
				});
			},
			
			// 切换谷粒开关
			switchGuli(e) {
				this.useGuli = e.detail.value;
				if (this.useGuli) {
					// 打开时自动使用全部谷粒
					this.useAllGuli();
				} else {
					this.guliAmount = '';
				}
			},
			
			// 全部使用谷粒
			useAllGuli() {
				let maxAmount = Math.min(this.guliBalance, this.trueprice);
				this.guliAmount = maxAmount.toFixed(2);
			},
			
			// 选择支付方式
			selectPayMethod(method) {
				this.payMethod = method;
			},
			
			// 支付方式改变
			radioChange(e) {
				this.payMethod = e.detail.value;
			},
			
			// 立即支付
			post_pay() {
				// 验证支付信息
				if (this.needWechatPay && !this.payMethod) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					});
					return;
				}
				
				// 如果选择了谷粒余额支付（payMethod为3），弹出密码输入框
				if (!this.needWechatPay || (this.payMethod == 3)) {
					// 纯谷粒支付，需要输入密码
					this.showPwdDialog = true;
					return;
				}
				
				// 微信支付，直接提交
				this.submitPay();
			},
			
			// 密码确认
			onPwdConfirm(password) {
				this.showPwdDialog = false;
				// 密码验证成功，提交支付
				this.submitPay(password);
			},
			
			// 忘记密码
			onForgetPwd() {
				uni.showToast({
					title: '请联系客服重置密码',
					icon: 'none'
				});
			},
			
			// 提交支付
			submitPay(password = '') {
				// 构建支付信息
				const payInfo = {
					totalAmount: this.trueprice,
					guliAmount: this.useGuli ? (parseFloat(this.guliAmount) || 0) : 0,
					remainAmount: this.remainAmount,
					payMethod: this.needWechatPay ? this.payMethod : 3, // 3表示仅余额支付
					password: password // 支付密码
				};
				
				this.$emit('gopay', payInfo);
			}
		}
	}
</script>

<style scoped>
.pay_k {
	background: #ffffff;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 750rpx;
	color: #383838;
	font-size: 14px;
	z-index: 101;
	max-height: 90vh;
	overflow-y: scroll;
	border-radius: 24rpx 24rpx 0 0;
	box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.top_title {
	height: 50px;
	line-height: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 24rpx 24rpx 0 0;
	position: relative;
}

.top_title::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.top_title_t {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

.hide_pay {
	color: #ffffff;
	font-size: 14px;
	opacity: 0.9;
}

.price_d {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 30rpx 0;
	align-items: center;
	padding: 20rpx 0;
	background: linear-gradient(135deg, #fff5f5 0%, #fff9f9 100%);
	border-radius: 16rpx;
	margin: 30rpx;
}

.price_b {
	margin-right: 5px;
	color: #ff2983;
}

.price {
	font-size: 30px;
	font-weight: bold;
	color: #ff2983;
}

.combine_title {
	padding: 20rpx 30rpx 10rpx;
}

.combine_title_text {
	font-size: 14px;
	color: #999;
}

.balance_item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 30rpx;
	background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
	border-radius: 12rpx;
	margin: 0 30rpx 20rpx;
	border: 1rpx solid #e8ecf7;
}

.balance_status {
	font-size: 14px;
	color: #52c41a;
	font-weight: 600;
	padding: 8rpx 20rpx;
	background: #f0f9f4;
	border-radius: 20rpx;
}

.balance_left {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.balance_icon {
	width: 40px;
	height: 40px;
	margin-right: 20rpx;
}

.balance_info {
	display: flex;
	flex-direction: column;
}

.balance_name {
	font-size: 16px;
	margin-bottom: 5rpx;
}

.balance_amount {
	font-size: 12px;
	color: #999;
}

.input_amount {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 15rpx 30rpx 15rpx 100rpx;
	background: #f9f9f9;
}

.input_label {
	font-size: 14px;
	color: #666;
}

.input_box {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 20rpx;
	margin: 0 10rpx;
	background: #fff;
	border-radius: 5px;
	font-size: 14px;
}

.input_unit {
	font-size: 14px;
	color: #666;
	margin-right: 20rpx;
}

.use_all_btn {
	color: #409eff;
	font-size: 14px;
}

.balance_tip {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 15rpx 30rpx;
	background: #f0f9ff;
	border-left: 4rpx solid #52c41a;
	margin: 10rpx 30rpx;
}

.tip_text {
	font-size: 14px;
	color: #52c41a;
	margin-left: 8rpx;
}

.remain_pay {
	margin-top: 20rpx;
	padding: 20rpx 30rpx;
	background: #f9f9f9;
}

.remain_title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.remain_text {
	font-size: 14px;
	color: #666;
}

.remain_price {
	font-size: 18px;
	font-weight: bold;
	color: #ff2983;
}

.pay_tips {
	padding: 20rpx;
	background: #fff9f0;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.tip_item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.tip_item:last-child {
	margin-bottom: 0;
}

.tip_label {
	font-size: 14px;
	color: #666;
}

.tip_value {
	font-size: 16px;
	font-weight: 500;
}

.tip_guli {
	color: #52c41a;
}

.tip_wechat {
	color: #ff2983;
}

.pay_dan {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 24rpx;
	align-items: center;
	background: #fff;
	border-radius: 12rpx;
	margin: 0 30rpx 20rpx;
	border: 2rpx solid #f0f0f0;
	transition: all 0.3s;
}

.pay_dan:active {
	border-color: #667eea;
	background: #f8f9ff;
}

.pay_dan_left {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.pay_dan_left_img {
	width: 50px;
	height: 50px;
	margin-right: 20rpx;
}

.flex {
	display: flex;
	flex-direction: column;
}

.pay_dan_text_t {
	font-size: 16px;
}

.pay_dan_text {
	color: #999;
	font-size: 12px;
	margin-top: 5rpx;
}

.pay_detail {
	margin: 20rpx 30rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, #fafbff 0%, #ffffff 100%);
	border-radius: 16rpx;
	border: 1rpx solid #e8ecf7;
}

.detail_title {
	font-size: 15px;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: 600;
}

.detail_item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 0;
}

.detail_label {
	font-size: 14px;
	color: #666;
}

.detail_value {
	font-size: 14px;
	color: #333;
}

.detail_minus {
	color: #52c41a;
}

.detail_divider {
	height: 1px;
	background: #e5e5e5;
	margin: 10rpx 0;
}

.detail_total {
	margin-top: 10rpx;
}

.detail_total_price {
	font-size: 18px;
	font-weight: bold;
	color: #ff2983;
}

.pay_post {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 30rpx;
	height: 96rpx;
	border-radius: 48rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
	transition: all 0.3s;
}

.pay_post:active {
	transform: scale(0.98);
	opacity: 0.9;
}

.pay_post_t {
	color: #ffffff;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 2rpx;
}
</style>
